<template>
  <view>
    <my-message-top :text="'我的喜欢'"></my-message-top>
    <view class="cat-article-main">
      <view class="cat-article-box" v-for="(item,i) in likeList" :key="item.id">
        <my-article :item='item'></my-article>
      </view>
    </view>
  </view>
</template>

<script>
  import {getMyLike} from '../../api/person.js'
  export default {
    data() {
      return {
        queryObj: {
              
              pageNum: 1,
              
              pageSize: 6,
              module:0
            },
            likeList: [],
            isloading: false,
            total: 0
    };
  },
  onLoad(){
    this.getLikeList()
  },
  onReachBottom(){
    console.log(666);
    if(this.queryObj.pageNum * this.queryObj.pageSize >= this.total) return uni.$showMsg('数据加载完毕！')
    if(this.isloading) return 
    this.queryObj.pageNum +=1
    this.getLikeList()
  },
  onPullDownRefresh(){
    this.queryObj.pageNum = 1
    this.total = 0
    this.isloading = false
    this.likeList = []
    
    this.getLikeList(() => uni.stopPullDownRefresh())
  },
  methods:{
    async getLikeList(cb){
      this.isloading = true
      const {data:data} = await getMyLike()
      console.log(data);
      this.isloading = false
      
      cb && cb()
      
      this.likeList = [...this.likeList,...data.data.articles]
      this.total = data.data.num
    }
  }
  }
</script>

<style lang="scss">
.cat-article-main{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    .cat-article-box{
      width: 320rpx;
      height: 406rpx;
      margin: 15rpx 15rpx;
      border-radius-top-left: 10px;
      border-radius-top-right: 10px;
      image{
        width: 320rpx;
        height: 338rpx;
      }
      .cat-article-box-title{
        width: 320rpx;
        height: 68rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #FFFDFB;
        border-radius-bottom-left: 10px;
        border-radius-bottom-right: 10px;
        text{
          font-size: 11px;
          color: #383838;
          white-space: nowrap;
          overflow:hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }
</style>
